<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no"/>
<meta name="wap-font-scale" content="no">
<meta name="renderer" content="webkit">
<title>AutoCode</title>
<link rel="shortcut icon" href="/favicon.ico" />
<script src="/links/jquery/jquery-3.5.1.min.js"></script>
<script src="/links/polyfill.min.js"></script>
<script src="/links/axios/axios.min.js"></script>
<script src="/links/vue/vue.min.js"></script>
<script src="/links/element-ui/index.js"></script>
<script src="/links/dayjs.min.js"></script>
<script src="/links/echarts/echarts.js"></script>
<script src="/links/JsBarcode.all.js"></script>
<script src="/links/qrcode.min.js"></script>
<script src="/links/layer/layer.js"></script>
<script src="/links/crypto/crypto-js.js"></script>
<script src="/js/dragController.js"></script>
<script src="/js/HttpApi.js"></script>
<script src="/js/AutoCode.js"></script>
<link href="/links/element-ui/theme/index.css" rel="stylesheet"/>
<link href="/css/default.css" rel="stylesheet"/>
<link href="/css/dragController.css" rel="stylesheet"/>
    
    <style>
        
    </style>
</head>
<body>
<div id="app"  class="box " >
<div class="left " style="width:400px;">
<div class="flex ac-table-head" style="justify-content:flex-start;">
    <div class="ac-table-title">{{workflow2.title}}</div>
    <div class="ac-table-oper"><el-form :inline="true" label-position="left" :model="workflow2.operData" size="mini" class="searchForm" @submit.native.prevent="workflow2_load">
<el-form-item v-if="workflow2.operVisible.keyWord"><el-input type="text" v-model="workflow2.operData.keyWord" clearable placeholder="流程代码/名称"  @keyup.enter.native="workflow2_load"></el-input>
</el-form-item>
<el-form-item v-if="workflow2.operVisible.query"><el-button size="medium"  v-if="workflow2.operVisible.query" @click="workflow2_load()" :disabled="workflow2.operDisabled.query"  type="text"     native-type="button">刷新(Q)</el-button>
</el-form-item>

</el-form>
</div>
</div>
<div class="ac-table-content">
    <el-table row-key="id" highlight-current-row stripe show-header    border  
    :data="workflow2.data" size="mini" ref="workflow2"
       
    height="100%"
    @current-change="workflow2_currentChange">
    <el-table-column type="index" width="50" label="序号"></el-table-column>
<el-table-column prop="wfCode" label="流程代码"    align="left"  show-overflow-tooltip >
   <template slot-scope="scope">
        {{scope.row.wfCode}}
   </template>
</el-table-column>
<el-table-column prop="label" label="流程名称"    align="left"  show-overflow-tooltip >
   <template slot-scope="scope">
        {{scope.row.label}}
   </template>
</el-table-column>
<el-table-column prop="busiTable" label="业务表"    align="left"  show-overflow-tooltip >
   <template slot-scope="scope">
        {{scope.row.busiTable}}
   </template>
</el-table-column>

</el-table>

</div>

          
</div>
<div class="resize"></div>
<div class="right " style="width:calc(100% - 402px);">
<div class="flex ac-table-head" style="justify-content:flex-start;">
    <div class="ac-table-title">{{wfFields.title}}</div>
    <div class="ac-table-oper"><el-button size="medium"  v-if="wfFields.operVisible.add" @click="wfFields_openWfFieldAdd()" :disabled="wfFields.operDisabled.add"  type="text"     native-type="button">添加(A)</el-button>
<el-button size="medium"  v-if="wfFields.operVisible.edit" @click="wfFields_editWfFieldAdd()" :disabled="wfFields.operDisabled.edit"  type="text"     native-type="button">编辑(E)</el-button>
<el-button size="medium"  v-if="wfFields.operVisible.del" @click="wfFields_delete()" :disabled="wfFields.operDisabled.del"  type="text"     native-type="button">删除(D)</el-button>
</div>
</div>
<div class="ac-table-content">
    <el-table row-key="id" highlight-current-row stripe show-header    border  
    :data="wfFields.data" size="mini" ref="wfFields"
       
    height="100%"
    @current-change="wfFields_currentChange">
    <el-table-column type="selection" width="50" align="center"></el-table-column>
<el-table-column type="index" width="50" label="序号"></el-table-column>
<el-table-column prop="name" label="字段标识"    align="left"  show-overflow-tooltip >
   <template slot-scope="scope">
        {{scope.row.name}}
   </template>
</el-table-column>
<el-table-column prop="label" label="字段说明"    align="left"  show-overflow-tooltip >
   <template slot-scope="scope">
        {{scope.row.label}}
   </template>
</el-table-column>
<el-table-column prop="fieldType" label="字段类型"    align="left"   >
   <template slot-scope="scope">
        <template v-for="dict in dictOptions.fieldType" v-if="scope.row.fieldType==dict.value"> <i :style="{color:dict.iconColor}" :class="dict.icon"></i> <label :style="{color:dict.fontColor}">{{dict.label}}</label></template>
   </template>
</el-table-column>
<el-table-column prop="isRequired" label="必填项"    align="center"   class-name="editorCell">
   <template slot-scope="scope">
        <el-checkbox  v-model="scope.row.isRequired"  size="small"  true-label="Y"  false-label="N"  @change="wfFields_change('isRequired',scope.row)"></el-checkbox>

   </template>
</el-table-column>
<el-table-column prop="noUpdata" label="禁止更新"    align="center"   class-name="editorCell">
   <template slot-scope="scope">
        <el-checkbox  v-model="scope.row.noUpdata"  size="small"  true-label="Y"  false-label="N"  @change="wfFields_change('noUpdata',scope.row)"></el-checkbox>

   </template>
</el-table-column>
<el-table-column prop="selectShow" label="查询显示"    align="center"   class-name="editorCell">
   <template slot-scope="scope">
        <el-checkbox  v-model="scope.row.selectShow"  size="small"  true-label="Y"  false-label="N"  @change="wfFields_change('selectShow',scope.row)"></el-checkbox>

   </template>
</el-table-column>
<el-table-column prop="keyWord" label="关键字检索"    align="center"   class-name="editorCell">
   <template slot-scope="scope">
        <el-checkbox  v-model="scope.row.keyWord"  size="small"  true-label="Y"  false-label="N"  @change="wfFields_change('keyWord',scope.row)"></el-checkbox>

   </template>
</el-table-column>
<el-table-column prop="remark" label="备注"    align="left"  show-overflow-tooltip >
   <template slot-scope="scope">
        {{scope.row.remark}}
   </template>
</el-table-column>
<el-table-column prop="sortNo" label="排序" width="70"   align="left"   class-name="editorCell">
   <template slot-scope="scope">
        <el-input-number size="small" v-model="scope.row.sortNo"       :controls="false"  @change="wfFields_change('sortNo',scope.row)"></el-input-number>

   </template>
</el-table-column>

</el-table>

</div>

          
</div>

<el-dialog :visible.sync="wfFieldAdd.visible" :title="wfFieldAdd.title"
            width="500px"
                
            :close-on-click-modal="false"
            :close-on-press-escape="false">
            <div style="width:100%;">
                <el-form class=""  :show-message="false"  label-width="80px" label-position="right"
     size="mini" ref="wfFieldAdd" :model="wfFieldAdd.data" :rules="wfFieldAdd.rules"  
     :disabled="wfFieldAdd.disabled" @submit.native.prevent>
    <el-row><el-col :span=24 v-if="wfFieldAdd.itemVisible.name">
    <el-form-item prop="name" label="字段标识">
        
<el-input type="text" size="mini"  v-model="wfFieldAdd.data.name" placeholder="字段标识" :disabled="wfFieldAdd.itemDisabled.name"  @keyup.enter.native="wfFieldAdd_dialogOk"  ></el-input>

        
    </el-form-item>
</el-col>
<el-col :span=24 v-if="wfFieldAdd.itemVisible.label">
    <el-form-item prop="label" label="字段名称">
        
<el-input type="text" size="mini"  v-model="wfFieldAdd.data.label" placeholder="字段名称" :disabled="wfFieldAdd.itemDisabled.label"  @keyup.enter.native="wfFieldAdd_dialogOk"  ></el-input>

        
    </el-form-item>
</el-col>
<el-col :span=24 v-if="wfFieldAdd.itemVisible.fieldType">
    <el-form-item prop="fieldType" label="字段类型">
        <el-select v-model="wfFieldAdd.data.fieldType" style="width:100%;" placeholder="字段类型" size="mini" :disabled="wfFieldAdd.itemDisabled.fieldType" clearable      @keyup.enter.native="wfFieldAdd_dialogOk">
   <el-option v-for="dict in dictOptions.fieldType" :label="dict.label" :value="dict.value"></el-option>
</el-select>

        
    </el-form-item>
</el-col>
<el-col :span=24 v-if="wfFieldAdd.itemVisible.isRequired">
    <el-form-item prop="isRequired" label="必填项">
        <el-checkbox  v-model="wfFieldAdd.data.isRequired"  size="mini"  true-label="Y"  false-label="N" :disabled="wfFieldAdd.itemDisabled.isRequired"  @keyup.enter.native="wfFieldAdd_dialogOk"></el-checkbox>

        
    </el-form-item>
</el-col>
<el-col :span=24 v-if="wfFieldAdd.itemVisible.remark">
    <el-form-item prop="remark" label="备注">
        <el-input type="textarea" size="mini"  v-model="wfFieldAdd.data.remark" placeholder="备注" :rows="2" :autosize="false" :disabled="wfFieldAdd.itemDisabled.remark" ></el-input>

        
    </el-form-item>
</el-col>
</el-row>
 </el-form>

            </div>
            <div class="dialog-footer" slot="footer">    <el-button size="mini" @click="wfFieldAdd_dialogOk()"  type="primary"      native-type="button">确 定</el-button>
    <el-button size="medium" @click="wfFieldAdd_dialogCancel()"  type="text"      native-type="button">取 消</el-button>
</div>
</el-dialog>


</div>

</body>
<script th:inline="javascript">
    let vm = new Vue({
            el: '#app',
            data() {
                return {"wfFields":{"title":"流程表单","currentRow":{},"data":[],"expandRowKeys":[],"pagingData":{},"operData":{},"operVisible":{"add":true,"edit":true,"del":true},"operDisabled":{},"rawData":[],"itemVisible":{},"operDialogVisible":false},"workflow2":{"title":"工作流","currentRow":{},"data":[],"expandRowKeys":[],"pagingData":{},"operData":{"keyWord":""},"operVisible":{"query":true,"keyWord":true},"operDisabled":{},"rawData":[],"itemVisible":{},"operDialogVisible":false},"page":{},"tabDisabled":{},"tabVisible":{},"customOptions":{},"dictOptions":{},"wfFieldAdd":{"visible":false,"title":"表单字段","data":{"isRequired":"N"},"operData":{},"operVisible":{},"operDisabled":{},"disabled":false,"editorForm":true,"itemVisible":{"remark":true,"label":true,"name":true,"fieldType":true,"isRequired":true},"itemDisabled":{},"transfer":{},"rules":{"name":[{"required":true,"message":"请输入字段标识","trigger":"blur"}],"label":[{"required":true,"message":"请输入字段名称","trigger":"blur"}],"fieldType":[{"required":true,"message":"请输入字段类型","trigger":"blur"}]}}}
            },
            watch: {
},
            methods: {
wfFieldAdd_load:function(){
    let that = this;
    HttpApi.queryObject("autocodeWfFields",this.wfFieldAdd.operData,function(res){
        that.wfFieldAdd.data = res;
    });
},
wfFields_editWfFieldAdd:function(){
    let that = this;
    this.wfFieldAdd.editorForm = true;
    if(!this.wfFields.currentRow.id){
        this.$alert("请先选中一条表单字段信息");
        return;
    }else{
        this.wfFieldAdd_dialogOpen(this.wfFields.currentRow,function(dialogData){
            HttpApi.saveProvider("autocodeWfFields",dialogData,function(res){
                let index = that.wfFields.data.findIndex(function(item){
                    return item.id==res.id;
                });
                that.$set(that.wfFields.data, index, res);
                that.$refs.wfFields.setCurrentRow(res);
                that.$message.success("操作成功！");
                that.wfFieldAdd.visible = false;
            });
        })
    }
},
wfFields_change:function(fieldName,row){
    HttpApi.updateProvider("autocodeWfFields",fieldName,row,function(){
                        
    });
},
wfFieldAdd_dialogOpen:function(param,callback){
    this.$data.wfFieldAdd.data = this.$options.data().wfFieldAdd.data;
    this.$data.wfFieldAdd.operData = this.$options.data().wfFieldAdd.operData;
    for(let val in param) {
        this.$set(this.wfFieldAdd.data, val, param[val])
    }
    this.wfFieldAdd.callback=callback;
    this.wfFieldAdd.visible = true;
}
,
wfFields_load:function(){
    let that = this;
    HttpApi.queryArray("autocodeWfFields",this.wfFields.operData,function(res){
        that.wfFields.data  = res;
        if(that.wfFields.data.length>0){
            that.$refs.wfFields.setCurrentRow(that.wfFields.data[0]);
            that.wfFields_operCtrl(that.wfFields.data[0]);
        }else{
             that.$refs.wfFields.setCurrentRow();
             that.wfFields_operCtrl();
        }
    });
},
workflow2_currentChange:function(currentRow){
    if(currentRow){
        this.workflow2.currentNodeKey=currentRow.id;
        this.workflow2.currentRow = currentRow;
            this.wfFields.operData.wfId=this.workflow2.currentRow.id;
this.wfFields_load();

    }else{
        this.$data.workflow2.currentNodeKey=this.$options.data().workflow2.currentNodeKey;
        this.$data.workflow2.currentRow = this.$options.data().workflow2.currentRow;
        this.$data.wfFields.operData=this.$options.data().wfFields.operData;
this.$data.wfFields.data=this.$options.data().wfFields.data;

    }
    this.workflow2_operCtrl(currentRow);
},
wfFieldAdd_dialogOk:function(){
    let that = this;
    this.$refs.wfFieldAdd.validate(function(valid){
        if(valid){
            that.wfFieldAdd.callback(that.wfFieldAdd.data);
        }else{
            return false;
        }
    });
},
workflow2_operCtrl:function(currentRow) {
    /**
    * operDisabled：控制按钮的是否禁止操作，true代表禁止操作，false代表允许操作
    * this.$set(this.workflow2.operDisabled, "buttonE", true);
    * operVisible：控制按钮是否显示，true代表显示，false代表不显示
    * this.$set(this.workflow2.operVisible, "buttonE", false);
    */
    if(!currentRow) {
       
    }else {
       
    }
},
wfFields_operCtrl:function(currentRow) {
    /**
    * operDisabled：控制按钮的是否禁止操作，true代表禁止操作，false代表允许操作
    * this.$set(this.wfFields.operDisabled, "buttonE", true);
    * operVisible：控制按钮是否显示，true代表显示，false代表不显示
    * this.$set(this.wfFields.operVisible, "buttonE", false);
    */
    if(!currentRow) {
       
    }else {
       
    }
},
wfFields_currentChange:function(currentRow){
    if(currentRow){
        this.wfFields.currentNodeKey=currentRow.id;
        this.wfFields.currentRow = currentRow;
    }else{
        this.$data.wfFields.currentNodeKey=this.$options.data().wfFields.currentNodeKey;
        this.$data.wfFields.currentRow = this.$options.data().wfFields.currentRow;
    }
    this.wfFields_operCtrl(currentRow);
},
workflow2_load:function(){
    let that = this;
    HttpApi.queryArray("autocodeWf",this.workflow2.operData,function(res){
        that.workflow2.data  = res;
        if(that.workflow2.data.length>0){
            that.$refs.workflow2.setCurrentRow(that.workflow2.data[0]);
            that.workflow2_operCtrl(that.workflow2.data[0]);
        }else{
             that.$refs.workflow2.setCurrentRow();
             that.workflow2_operCtrl();
        }
    });
},
workflow2_change:function(fieldName,row){
    HttpApi.updateProvider("autocodeWf",fieldName,row,function(){
                        
    });
},
wfFieldAdd_dialogCancel:function(){
     this.wfFieldAdd.visible = false;
},
wfFieldAdd_change:function(fieldName){
    HttpApi.updateProvider("autocodeWfFields",fieldName,this.wfFieldAdd.data,function(){

    });
},
wfFields_delete:function() {
    let that = this;
    let selection = that.$refs.wfFields.selection;
    let selLength = selection.length;
    if (selLength == 0) {
        that.$alert("请勾选要操作的数据");
        return;
    }
    HttpApi.delBatchProviderConfirm("autocodeWfFields", selection, function(res) {
        for (let i = 0; i < selLength; i++) {
            let index = that.wfFields.data.findIndex(function(item) {
                return item.id == selection[i].id;
            });
            that.wfFields.data.splice(index, 1);
        }

        if (that.wfFields.data.length == 0) {
            that.$data.wfFields.currentRow = that.$options.data().wfFields.currentRow;
            that.$refs.wfFields.setCurrentRow();
        } else {
            that.$refs.wfFields.setCurrentRow(that.wfFields.data[0]);
        }
        that.$message.success("删除成功");
    });
},
wfFields_openWfFieldAdd:function(){
    let that = this;
    if (!this.workflow2.currentRow.id) {
        this.$alert("请先选中一条工作流信息");
        return;
    }else{
        this.wfFieldAdd.editorForm = false;
        let param = {};
        param.wfId=this.wfFields.operData.wfId;

        this.wfFieldAdd_dialogOpen(param,function(dialogData){
            HttpApi.saveProvider("autocodeWfFields",dialogData,function(res){
                that.$message.success("操作成功！");
                that.wfFields.data.push(res);
                that.$refs.wfFields.setCurrentRow(res);
                that.wfFieldAdd.visible = false;
            });
        })
    
    }
}
},
            mounted: function(){
    dragControllerLR();
    dragControllerUD();
},
            created: function(){
    let that=this;
    //获取字典信息
    HttpApi.dictOptions(["fieldType"],function(res){
        that.dictOptions=res;
    });

    //加载自定义数据字典
    

    //加载初始化load
    this.workflow2_load();


    //加载初始化方法
    
}
    });
    

    
</script>
</html>
